<html>
<head>
	<title>chat UI</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<!-- css布局文件-->
	<link href="/css/chatroom.css" rel="stylesheet">
	<!-- dialog插件的css文件-->
	<link rel="stylesheet" type="text/css" href="/css/jquery.dialogbox.css">

	<script>
		var user_name="";
		do user_name=prompt("请输入你的昵称：");
		while (user_name==""||user_name==undefined||user_name==null);
	</script>
</head>
<script>
</script>
<body class="box">
<div id="btn-dialogBox"></div>
<div id="auto-dialogBox"></div>
<div class="video_bar">
	<canvas id="pic_drawer" hidden></canvas>
	<video id="video_me" autoplay hidden></video>
	<video id="video_p2p" autoplay hidden></video>
	<ul id="video_list">
		<!--	视频窗口放置处	-->
<!--		<li>-->
<!--			<video id="video_p2p1" autoplay></video>-->
<!--			<span>猪猪侠</span>-->
<!--		</li>-->
<!--		<li>-->
<!--			<video id="video_p2p2" autoplay></video>-->
<!--			<span>猪猪侠</span>-->
<!--		</li>-->
	</ul>

</div>
<div class="container">
	<div class="chatbox">
		<div class="chatleft">
			<div class="top">
				<i class="fas fa-bars" style="font-size: 1.4em"></i>
<!--				<input type="text" placeholder="search" style="width: 140px; height: 36px; margin-left: 25px;">-->
<!--				<button class="searchbtn">搜</button>-->
				在线人数：<span id="user_num" style="color: red">0</span>&nbsp&nbsp昵称：<span id="user_name" style="color: green"></span>
			</div>
			<div class="center">
				<ul id="multi_chat_option" style="background-color: #d7dede;"><img ><span>群聊天室</span></ul>
				<ul id="user_list">
					<!--	用户列表				-->
<!--					<li><img><span>小兰</span></li>-->
<!--					<li><img><span>三大哈</span></li>-->
				</ul>
			</div>
		</div>
		<div class="chatright">
			<div class="top">
				<div class="top_chatting">
					<img src="/img/user_log.png">
					<span id="chat_user_name" style="margin-left: 20px;">聊天大厅</span>
				</div>
				<i class="fas fa-ellipsis-v" style="font-size: 1.4em; position: absolute; right: 20px; color: gray;"></i>
			</div>
			<div class="center" id="chat_list_scroll">
				<ul id="chat_list">
					<!--	聊天内容-->
<!--					<li class="msgleft"><div id="xiaolan"><img>小兰是憨憨j</div><p>This message on the left!</p></li>-->
<!--					<li class="msgright"><p>This message on the right!s a long message! This is a long message! This is a long left m</p><img></li>-->
<!--					<li class="msgleft"><div><img>小红</div><p>This is a long message! This is a long message! This is a long left message!</p></li><li class="msgright"><p>This  on the right!</p><img></li>-->
<!--					<li class="msgleft"><div><img>猪大侠</div><p>This is a long message! This is a long message! This is a long left message!</p></li>-->
				</ul>
			</div>
			<div class="footer">
				<div class="more_btn">
<!--					<img title="表情" id="emojiBtn" src="/img/emoji.png">-->
					<img title="图片上传" id="uploadBtn" onclick="picClick()" src="/img/picture.png">
					<ul class="btn_choose">
						<input type="file" id="image_file_sel" accept = 'image/*' style="width: 70px">
						<li id="quitPicBt" style="display: none"><button onclick="quitPicClick()">结束拍照</button></li>
						<li><button onclick="catPicClick()">拍照上传</button></li>
					</ul>
<!--					<img title="文件上传" id="fileBtn" src="/img/file.png">-->
					<img title="视频聊天" id="videoBtn" onclick="videoClick()" src="/img/video.png">
<!--					<img title="语音聊天" onclick="testRun()" id="audioBtn" src="/img/audio.png">-->
				</div>
				<textarea id="inputMsg" onkeyup="onInputEvent(event.key);" maxlength="800" rows="5" cols="40" style="width: 100%; resize: none; border: none; " placeholder="请在此输入要发送的内容..."></textarea>
				<button class="sendbtn" onclick="sendMsg()">发送</button>
			</div>
		</div>
	</div>
</div>
	<!-- jquery不必多说，js与jq的配合，舒服-->
	<script src="/js/jquery-3.5.1.min.js"></script>
	<!-- dialog插件主程序-->
	<script src="/js/jquery.dialogBox.js"></script>
	<!-- 引用socket.io，必须的 -->
	<script src="/socket.io/socket.io.js"></script>
	<!-- 这里存放了我对socket事件的处理等等 -->
	<script src="/js/socket_setting.js"></script>
	<!-- 这个文件主要是界面事件的监听，如按钮，鼠标点击等-->
	<script src="/js/chatroom.js"></script>
	<!-- 实现RTC视频聊天的文件-->
	<script src="/js/bbyrtc.js"></script>

</body>
</html>